<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="" slot="top">
        <u-navbar height="50" title="用户评论" title-size="36" title-color="#333"></u-navbar>
        <view class="content-tip">
          <view class="mer-rate-left">
            <view class=""> 5.0 </view>
            <p>商家评分</p>
          </view>
          <view class="mer-rate-right">
            <text>商家</text>
            <u-rate :count="countRate" v-model="value"></u-rate>
            <view class="">
              <text class="rate-tip">好评12</text>
              <text class="rate-tip" style="margin-left: 8rpx">差评3</text>
            </view>
          </view>
        </view>
      </view>
      <view class="comment-area">
        <view class="comment-box" v-for="item in dataList" :key="item.id">
          <view class="comment-top">
            <text class="txt1">用户评论</text>
            <!-- <text class="txt2">{{commentCount}}条好评></text> -->
          </view>
          <view class="comment-info">
            <view class="comment-info-left">
              <u-avatar class="info-left-tx" :src="item.userAvatar" mode=""></u-avatar>
              <view class="info-left-username">
                <p>{{ item.userNickname }}</p>
                <p>{{ item.createTime }}</p>
              </view>
            </view>
            <view class="comment-info-right">
              <p style="text-align: right">非常满意</p>
              <view class="">
                <u-rate v-model="item.scores"></u-rate>
              </view>
            </view>
          </view>
          <view class="comment-content">
            <view class="">
              {{ item.content }}
            </view>
            <view class="comment-img">
              <image v-for="(item, index) in item.picUrls" :key="index" :src="item" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      countRate: 5,
      value: 5,
      stpe: 3,
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '拼团中'
        },
        {
          name: '拼团成功'
        },
        {
          name: '已失效'
        }
      ],
      dataList: [
        {
          userNickname: '',
          userAvatar: '',
          createTime: '',
          scores: 0,
          content: '',
          picUrls: []
        }
      ]
    }
  },
  onLoad(res) {
    this.goodsId = res.goodsId
    this.queryList(1, 10)
  },
  methods: {
    queryList(page, pageSize) {
      //this.initData(page, pageSize, '');
      this.$u.api
        .getGoodsComment({ pageNo: 1, pageSize: 1, spuId: this.goodsId, type: 0 })
        .then((res) => {
          this.dataList = res.data.list
        })
    },

    initData(page, pageSize, status) {
      let self = this
      self.onOrderLoad(self.current, this.itemList, false)
    },
    onOrderLoad(current, orderList, loading) {
      if (loading) {
        this.$u.api.getOrderGroup({ filter_status: 1 }).then((res) => {
          console.log(res)
        })
        this.$refs.paging.reload()
      } else {
        this.$refs.paging.complete(this.dataList)
      }
    },
    onOrderDetail(item) {
      this.$utils.route({
        url: '/goods/group-order-details/group-order-details',
        params: {
          id: item.id
        }
      })
    },
    onShare() {},
    routeTo() {
      uni.navigateTo({
        url: '/goods/pre-goods-details/pre-goods-details'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #eeeeef;
}

.content-tip {
  display: flex;
  height: 140rpx;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
}

.mer-rate-left {
  flex: 3;
  text-align: center;
  view {
    font-size: 45rpx;
    font-weight: 700;
  }
  p {
    color: #666666;
  }
}

.mer-rate-right {
  flex: 7;
  margin-top: 20rpx;
  text {
    font: 35rpx;
  }
  .rate-tip {
    padding: 5rpx 10rpx;
    color: #ffac0e;
    background-color: #f5f0e6;
  }
}

.comment-area {
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.comment-top {
  overflow: auto;
}

.txt1 {
  font-size: 35rpx;
  float: left;
}

.txt2 {
  float: right;
  color: #7e7e5e;
}

.comment-info {
  overflow: auto;
  margin: 15rpx 0;
}
.comment-info-left {
  float: left;
  width: 45%;
}

.info-left-username {
  display: inline-block;
  vertical-align: top;
}

.comment-info-right {
  float: right;
}

.info-left-tx {
  width: 90rpx;
  height: 90rpx;
  border-radius: 90rpx;
}

.comment-img image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 10rpx;
}
</style>
